<template>
  <div id="centerLeft1">
    <div class="percentCake">

      <div class="item bg-color-black">
        <span>学历占比（%）</span>
        <div id="main1" style="width: 100%;height:280px;"></div>
      </div>

      <div class="item bg-color-black">
        <span>简历性别占比（%）</span>
        <div id="main2" style="width: 100%;height:280px;"></div>
      </div>

      <div class="item bg-color-black">
        <span>企业组成占比（%）</span>
        <div id="main3" style="width: 100%;height:280px;"></div>
      </div>

      <div class="item bg-color-black">
        <span>待其他展示</span>
        <div id="main4" style="width: 100%;height:240px;"></div>
      </div>
    </div>


  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  data() {
    return {
      ageYdata: ['>50', '41-50', '31-40', '24-30', '18-23', '<18'],
      sexYdata: [
        {value: 48, name: '男'},
        {value: 75, name: '女'},
      ],
    }
  },
  mounted() {
    this.drawChart();
  },
  methods: {
    drawChart() {
      //简历性别占比
      var myChart1 = echarts.init(document.getElementById('main1'));

      //企业性质占比
      var myChart2 = echarts.init(document.getElementById('main2'));

      //简历中的学历占比
      var myChart3 = echarts.init(document.getElementById('main3'));

      //待定
      var myChart4 = echarts.init(document.getElementById('main4'));

      //简历性别占比
      var option1 = {
        title: {
          text: '',
          subtext: '',
          left: 'left'
        },
        tooltip: {
          trigger: 'item',

        },
        legend: {
          orient: 'vertical',
          left: 'right',
          top: "30px",
          right: 'left',
          textStyle: {
            fontSize: 15,
            color: '#fff'
          }
        },
        color: ["rgb(71,137,246)", "rgb(106,198,207)", "rgb(232,78,101)"],

        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '40%',
            data: this.sexYdata,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgb(0,0,0)'
              }
            }
          }
        ]
      };

      var option2 = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          // top: 'bottom',
          // top: '0%',
          left: 'center',
          textStyle: {
            fontSize: 15,
            color: '#fff'
          }
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['20%', '40%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '15',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {value: 10, name: '国有企业'},
              {value: 15, name: '有限公司'},
              {value: 13, name: '个体工商户'},
              {value: 2, name: '股份有限公司'}
            ]
          }
        ]
      };

      var option3 = {
        legend: {
          top: 'bottom',
          textStyle: {
            fontSize: 15,
            color: '#fff'
          }
        },
        toolbox: {
          show: true,
          feature: {
            mark: {show: true}
          }
        },
        series: [
          {
            name: 'Nightingale Chart',
            type: 'pie',
            radius: [10, 50],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },
            data: [
              {value: 40, name: 'rose 1'},
              {value: 38, name: 'rose 2'},
              {value: 32, name: 'rose 3'},
              {value: 30, name: 'rose 4'},
              {value: 28, name: 'rose 5'},
              {value: 26, name: 'rose 6'},
              {value: 22, name: 'rose 7'},
              {value: 18, name: 'rose 8'}
            ]
          }
        ]
      };

      var option4 = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center',
          textStyle: {
            fontSize: 15,
            color: '#fff'
          }
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['20%', '40%'],
            //图形外文字线
            labelLine: {
              normal: {
                length: 20,
                length2: 30
              }
            },
            avoidLabelOverlap: false,
            itemStyle: {
              borderColor: '#fff',
              borderWidth: 1
            },
            label: {
              normal: {
                //图形外文字上下显示
                formatter: '{c|{c}个} {b|{b}}',
                borderWidth: 10,
                borderRadius: 1,
                //文字和图的边距
                padding: [0, -20],
                rich: {
                  a: {
                    color: '#333',
                    fontSize: 33,
                    lineHeight: 1
                  },
                  //name 文字样式
                  b: {
                    fontSize: 15,
                    lineHeight: 20,
                    color: '#CDCDD0'
                  },
                  //value 文字样式
                  c: {
                    fontSize: 15,
                    lineHeight: 15,
                    color: '#63BF6A',
                    align: "center"
                  }
                }
              }
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '15',
                fontWeight: 'bold'
              }
            },
            data: [
              {value: 80, name: '本科'},
              {value: 76, name: '中技/中专'},
              {value: 102, name: '大专'},
              {value: 43, name: '高中'},
              {value: 12, name: '初中'}
            ]
          }
        ]
      };

      myChart1.setOption(option4);
      myChart2.setOption(option1);
      myChart3.setOption(option2);
      myChart4.setOption(option3);

    },
  }
}
</script>

<style lang="scss" scoped>
$box-width: 1000px;
$box-height: 580px;

#centerLeft1 {
  padding: 16px;
  height: $box-height;
  width: $box-width;
  border-radius: 10px;

  .bg-color-black {
    height: $box-height - 30px;
    border-radius: 10px;
  }

  .text {
    color: #c3cbde;
  }

  .dv-dec-3 {
    position: relative;
    width: 100px;
    height: 20px;
    top: -3px;
  }

  .bottom-data {
    .item-box {
      & > div {
        padding-right: 5px;
      }

      font-size: 14px;
      float: right;
      position: relative;
      width: 50%;
      color: #d3d6dd;

      .dv-digital-flop {
        width: 120px;
        height: 30px;
      }

      // 金币
      .coin {
        position: relative;
        top: 6px;
        font-size: 20px;
        color: #ffc107;
      }

      .colorYellow {
        color: yellowgreen;
      }

      p {
        text-align: center;
      }
    }
  }

  .percentCake {
    width: 100%;
    display: flex;
    flex-wrap: wrap;

    .item {
      width: 50%;
      height: 275px;

      span {
        display: inline-block;
        text-align: center;
        vertical-align: middle;
        width: 100%;
        height: 30px;
        line-height: 30px;
      }
    }
  }

  .bg-color-black {
    height: $box-height - 300px;
    border-radius: 10px;
  }
}
</style>
